<template>
    <div>
        <PageHeader></PageHeader>

        <div class="body">
            <div class="container">
                <h1 class="page-title" v-if="aid == null">发表文章</h1>
                <h1 class="page-title" v-else>修改文章{{ aid }}</h1>
                
                <form class="a-form">
                    <div class="field">
                        <label for="">标题</label>
                        <input type="text" />
                    </div>

                    <div class="field">
                        <label for="">内容</label>
                        <textarea></textarea>
                    </div>

                    <div class="action">
                        <button type="button" @click="onSubmit">
                            保存编辑
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <PageFooter></PageFooter>
    </div>
</template>

<script>
import PageHeader from "@/components/commons/header";
import PageFooter from "@/components/commons/footer";
export default {
    props: ["aid"],
    components: { PageHeader, PageFooter },
    data() {
        return {};
    },
    methods: {
        onSubmit() {
            // 跳回首页
            this.$router.push("/");
        },
    },
};
</script>

<style lang="less" scoped>
.page-title{
    font-size: 26px;
    border-bottom: 1px solid #ddd;
    line-height: 40px;
    margin:10px 0 30px 0;
}

.a-form{
        width: 800px;
        margin: 0 auto;

        .field{
            margin: 15px 0;

            label{
                display: inline-block;
                width: 80px;
                text-align: right;
                margin-right: 10px;
                vertical-align: top;
          }

            input{
                width: 710px;
                height: 30px;
                padding: 0 15px;
                box-sizing: border-box;

            }

            textarea{
                width: 710px;
                height: 400px;
                padding: 15px;
                box-sizing: border-box;

            }


        }

        .action{
            margin: 30px 0 20px 0;
            text-align: center;

            button{
                height: 30px;
                padding: 0 15px;
                letter-spacing: 2px;

            }
        }
    }
</style>